<template>
<div>
  <Layout>
        <Sider hide-trigger style="background:#fff" width=135>
          <Tree :data="lists" @on-select-change='getpId'></Tree>
        </Sider>
        <Layout>
            <Content>
              <Input v-model="filter.title">
                  <Button slot="append" icon="ios-search" @click="searchs"></Button>
              </Input>
              <Table border :columns="columns7" ref="selection" :data="list" @on-selection-change="selected" @on-row-click="getID"></Table>
              <Button @click="handleSelectAll(true)" style="margin-top:10px">Set all selected</Button>
              <Button @click="handleSelectAll(false)" style="margin-top:10px">Cancel all selected</Button>
              <Button @click="tj" style="margin-top:10px" type="success">add</Button>
              <Modal
                  title="添加新闻"
                  v-model="modal10"
                  class-name="vertical-center-modal"
                  @on-ok="add">
                  <Form :model="formItem" :label-width="80">
                    <FormItem label="news">
                      <Input v-model="formItem.title" placeholder="Place input the title"></Input>
                    </FormItem>
                    <FormItem label="author">
                      <Input v-model="formItem.author" placeholder="Place input the author"></Input>
                    </FormItem>
                    <FormItem label="content">
                        <Input v-model="formItem.brief" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
                    </FormItem>
                  </Form>
              </Modal>
              <Button type="error" style="margin-top:10px" @click="delectSelected">delectSelected</Button>
              <Page :total="total" size="small" show-elevator show-sizer :page-size-opts="pageSizeOpts" :styles="Pstyle" @on-change="changePage" @on-page-size-change="changePageSize"></Page>

            </Content>

        </Layout>
    </Layout>

</div>

</template>
<script>
import { eventBus } from '../bus';
import Base from "../base";
export default {
  mixins:[Base],
  data() {
    return {
      data1: [],
      arr:[],
      newspId:'',
      userAdmin:'',
      backUser:'',
      modules:{type:'news'},
      Pstyle: { marginTop: "10px" },
      formItem: {
        title:'',
        author:'',
        brief:'',
        cateId:''
      },
      lists:[],
      columns7: [
        {
            type: 'selection',
            width: 60,
            align: 'center'
        },
        {
          title: "Title",
          key: "title",
        },
        {
          title: "Author",
          width: 90,
          key: "author",
        },
        {
          title: "Date",
          width: 120,
          key: "date",
          render:(h,params)=>{
            let d=params.row.date;
            return d.substring(0,10)
          }
        },
        {
          title: "Num",
          align:"center",
          key: "num",
          width: 80,
          render:(h,params)=>{
            params.row.num=this.arr[params.index]
            return params.row.num
          }
        },
        {
          title: "Action",
          key: "action",
          width: 240,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.handleRender();
                    }
                  }
                },
                "change"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "delete"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginLeft: "5px"
                  },
                  on: {
                    click: () => {
                        if(this.$route.query.user!==''){
                          this.userAdmin=this.$route.query.user;
                        }

                        if(this.prevID){
                          this.$router.push({ name: 'comment'});
                        }else{
                          this.error(true)
                        }
                    }
                  }
                },
                "comment"
              )
            ]);
          }
        }
      ]

    };
  },
  methods:{
    handleRender () {
      let pid=this.prevID._id;
      this.$http
      .get(`http://10.31.160.71:3000/news/data/`+pid)
      .then(response => {
        this.formItem.title=response.data.title;
        this.formItem.author=response.data.author;
        this.formItem.brief=response.data.brief;
        this.newspId='';
        this.modal10 = true;
      });

    },
    searchs(){
      this.getNews();
    },
    add(){
        if(this.formItem.title!==''&&this.prevID===''){
          this.$http
          .post(`http://10.31.160.71:3000/news/data`, this.formItem)
          .then(response => {
            this.getNews();
            this.formItem.title='';
            this.formItem.author='';
            this.formItem.brief='';
            this.success(true);
          });
        }else if(this.formItem.title!==''&&this.prevID!==''){
          let pid=this.prevID._id;
          this.$http
          .put(`http://10.31.160.71:3000/news/data/`+pid, this.formItem)
          .then(response => {
            this.getNews();
            this.formItem.title='';
            this.formItem.author='';
            this.formItem.brief='';
            this.success(true);
          });
        }else{
          this.error(true);
        }
    },
    //新闻分类
    getData(){
      this.axios.get('http://10.31.160.71:3000/cate/list/0')
      .then((response) => {
        this.lists = response.data;
      })
    },
     //添加用户
    tj(){
      this.formItem.cateId=this.newspId;
      if(this.newspId!==''){
        this.modal10 = true;
        this.prevID='';
        this.formItem.title='';
        this.formItem.author='';
        this.formItem.brief='';
      }else{
        this.warning(true);
      }
    },
    getNews() {
      this.axios({url:`http://10.31.160.71:3000/news/list`, method:"post",data:this.filter})
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          for(let i=0;i<this.list.length;i++){
            this.getNums(this.list[i]._id);
          }
        });
    },
    getNums(d){
      this.axios({url:`http://10.31.160.71:3000/comment/lists/`+d,methods:"get"})
        .then(response => {
          this.arr.push(response.data.total);
        });
    },
    warning (nodesc) {
        this.$Notice.warning({
            title: 'Please select category',
            desc: nodesc ? '' : ' '
        });
    },
    //获取当前新闻分类的ID
    getpId(data){
      this.newspId=data[0]._id;
      this.formItem.cateId=this.newspId;
      Object.assign(this.formItem,this.filter);
      this.$http
        .post(`http://10.31.160.71:3000/news/list`, this.formItem)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.arr=[];
          for(let i=0;i<this.list.length;i++){
            this.getNums(this.list[i]._id);
          }
        });
    }
  },
  created(){
    this.getData();
    this.getNews();
    eventBus.$on('backUser',data=>{
      this.backUser=data;
    });
  },
  beforeDestroy(){
    eventBus.$emit('sendNewID',this.prevID._id);
    var admin=this.userAdmin?this.userAdmin:this.backUser;
    eventBus.$emit('sendUser',admin);
  }
};
</script>


